<template>
    <div class="changegoods">
       
            <ul>
                <li v-for="(item, index) in changegoodsList" :key="index" @click="goDetail(item.order_id)">
                    <span>订单号：{{ item.order_id }}</span>
                    <van-swipe-cell :before-close="beforeClose">

                        <template #left>
                            <van-button square type="primary" class="take-button">已取消</van-button>

                        </template>
                        <van-card :price="item.goodsPrice" :title="item.goodsName" :thumb="item.goodsImgUrl"
                            :num="item.goodsNum">
                            <template #footer>
                                <span class="paystatus">已取消</span>
                            </template>
                        </van-card>
                        <template #right>
                            
                            <van-button square type="danger" class="delete-button"
                                @click='delGoods(item.order_id, item.id)'>删除</van-button>
                        </template>
                    </van-swipe-cell>
                </li>
            </ul>
       
    </div>

</template>

<script>
import { Dialog, Toast } from 'vant';
import http from '@/common/api/request'
export default {
    props: {
        changegoodsList: Array
    },
    data() {
        return {
            show: false,
            deshow: false,
            page:3
        }
    },
    methods: {
        beforeClose({ position, instance }) {
            switch (position) {
                case "left":
                case "cell":
                case "outside":
                    instance.close();
                    break;
                case "right":

            }
        },
        delGoods(order_id, id) {
                Dialog.confirm({
                    message: "确定删除该订单吗？",
                    theme: "round-button",
                    confirmButtonColor: "#1b1b1b",
                    cancelButtonColor: "#ccc"
                }).then(() => {
                    http.$axios({
                        url: "/api/deleteOrder",
                        method: "POST",
                        headers: {
                            token: true
                        },
                        data: {
                            orderId: order_id,
                            id: id
                        },
                    }).then(res => {
                        if (res.success) {
                            Toast(res.msg);
                            this.$emit('again',this.page)
                        }
                    });
                }).catch(() => { });
            
        },
        goDetail(order_id){
            this.$router.push({
                path:`/orderDetail/${order_id}`,
            })
        }
    }
}
</script>

<style scoped>
.changegoods ul {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
}

.changegoods ul li {
    /* display: flex;
    justify-content: space-between;
    align-items: center; */
    padding-left: 0.533333rem;
    margin: 0.213333rem 0;
    background-color: #fff;
    /* height: 108px; */
}

.changegoods ul li::before {
    content: '';
    width: 95%;
    display: block;
    margin: 0 auto;
    border-bottom: 1px solid #ccc;
}

.changegoods ul li span {
    display: inline-block;
    margin-top: 0.373333rem;
}

.changegoods ul li img {
    width: 1.973333rem;
    height: 1.973333rem;
}

::v-deep .van-icon {
    font-size: 100px;
}

::v-deep .van-swipe-cell {
    width: 100%;
    height: 100%;
}

::v-deep .van-card__price-integer {
    font-size: 20px;
}

::v-deep .van-card__title {
    font-size: 14px;
    font-weight: 550;
}

::v-deep .van-card__num {
    font-size: 16px;
}

.take-button {
    height: 100%;
    background-color: #ccc;
    border: 1px solid #ccc;
}

.delete-button {
    height: 100%;
    background-color: #ccc;
    border: 1px solid #ccc;
}

.paystatus {
    font-size: 18px;
}

::v-deep .van-popup .van-popup--top .van-notify .van-notify--danger {
    height: 1.473333rem;
    font-size: 18px;
}

::v-deep .van-popup--center {
    width: 150px;
    height: 45px;
    background-color: #ccc;
    text-align: center;
    align-items: center;
    line-height: 45px;
}
</style>
